<script setup lang="ts">
import {ref,computed,watch, watchEffect, onMounted, useTemplateRef} from 'vue';
//import comment from './components/Comment1.vue';
// const list= ref({
//   books:["语文","数学","英语"]
// });
// const listLength = computed(()=>{
//    return  list.value.books.length >0 ?"Yes":"No"
// }); 
// const firstName = ref("lao");
// const lastName = ref("wang");
// const isActive = ref(true);
// const isTitle = ref(true);
// const fullName = computed({
//   get(){
//     return firstName.value + " " +lastName.value;
//   },
//   set(newValue){
//     [firstName.value,lastName.value] = newValue.split(" ");
//   }
// });
// const computedClass = computed(()=>({active:isActive,title:isTitle}));
// const styleObject = ref({
//   color:"red",
//   fontSize:"40px"
// });
// const title = ref(true);
// const type = ref(3);
// const isShow =ref(true);
// const listConted = ref(["html","css","js","jquery"]);
// const items=ref([{message:["boo1","boo2"]},{message:["bar1","bar2"]}]);
// const courseList= ref([
//   {name:"html",list:["h1","h2","h3"]},
//   {name:"css",list:["color","fontSize","display"]},
//   {name:"js",list:["var","const","let"]}
// ]);
// const numbers = ref([1,2,3,4,5]);
// const eventNumbers = computed(()=>{
//   return numbers.value.filter((n)=> n%2===0)
// });
// const count = ref(0);
// const name = ref("vue.js");
// function greet(event){
//   alert(`Hello ${name.value}`);
//   if(event){
//     alert(event.target.tagName);
//   }
// }
// function say(message){
//   alert(message);
// }
// function warn(message,event){
//   if(event){
//     event.preventDefault();
    
//   }
//   alert(message);
// }
// function doThis(){
//   console.log("danjishijian");
// }
// const inputmessage = ref(0);
// function submitkey(){
//  inputmessage.value++;
// }
// const text = ref("xiaodiketang");
// const multiline = ref("");
// const tstyle = ref({
//   color:"red",
//   fontSize:"40px",
//   while:"pre-line"
// });
// const checked = ref(false);
// const checkedNames = ref([]);
// const picked= ref([]);
// const selected= ref([]);
// const select2ed = ref("A");
// const options = ref([
//   { text: 'One', value: "A" },
//   { text: 'Two', value: "B" },
//   { text: 'Three', value: "C" }
// ]);
// const toggle=ref("");
// const dynamicTrueValue = ref("yes");
// const dynamicFalseValue = ref("no")
// const pick=ref();
// const question = ref("");
// const answer =ref("Questions usually contain a question mark. ;-)");
// const loading  = ref(false);
// watch( question,async(newQuestion,oldQuestion)=>{
//   if(newQuestion.includes("?") || newQuestion.includes("？")){
//     loading.value = true;
//     answer.value = "Thinking...";
//     try{
//       const res = await fetch("https://yesno.wtf/api")
//       answer.value = (await res.json()).answer
//     }catch(error){
//       answer.value = "Error! Could not reach the API. " + error;
//     }finally{
//      loading.value = false;
//     }
    
//     setTimeout(()=>{
//       answer.value = "是的";
//     },1000);
//   }
// });

// const obj = ref({count:0});
// watchEffect(()=>{
//   console.log(`count is:${obj.value.count}`);
// });
// const input = useTemplateRef("my-input");
// onMounted(()=>{
//   console.log(input);
// });
// const listt=ref([1,2,3]);
// const itemRefs = useTemplateRef("items")
// onMounted(()=>{
//   console.log(itemRefs.value)
// });

// const commentRef = useTemplateRef("comment");
//import router from './router/index.ts';
// const routerChange = (n)=>{
//     router.push(n);
// }
import { useRouter } from 'vue-router'; 
import { useCounterStore } from '../src/stores/index'
const counter = useCounterStore();
const router=useRouter();
const routerChange = (n,obj)=>{
    router.push({path:n,query:obj});
}
</script>

<template>
  <h1>路由组件跳转</h1>
  <p>
    <span>pinia的数据:{{ counter.count }}</span>
    <button @click="counter.increment">+</button>
    <!-- <router-link to="/comment">打开comment</router-link>
    <router-link :to="{path:'/one',query:{xd:'组件传参',state:'xdclass'}}">打开组件1</router-link>
    <router-link to="/two">打开组件2</router-link>
    <router-link to="/three">打开组件2-子组件</router-link> -->
    <!-- <button @click="routerChange('/comment',{})">打开comment</button>
    <button @click="routerChange('/one',{xd:'组件传参',state:'hahhh'})">打开组件1</button>
    <button @click="routerChange('/two',{})">打开组件2</button>
    <button @click="routerChange('/three',{})">打开组件2-子组件</button>
    <button @click="routerChange('/three',{})">重定向</button> -->
  </p>
  <div>
    <router-view></router-view>
  </div>
  <!-- <comment ref="comment" /> -->
  <!-- <ul>
    <li v-for="item in listt" ref="items" :key="item">{{ item }}</li>
  </ul>
  <input ref="my-input"/>
  <button  @click="obj.count++">按钮</button>
  <p>
    提出问题：
    <input v-model="question" :disabled="loading"/>
  </p>
  <p>{{ answer }}</p>
  <input type="radio" v-model="pick" value="first"/>
  <input type="radio" v-model="pick" value="second"/>
  <div> radio:{{ pick }}</div>
  <input type="checkbox" v-model="toggle" :true-value="dynamicTrueValue" :false-value="dynamicFalseValue"/>
  <div>toggle:{{toggle }}</div>
  <select v-model="select2ed">
    <option v-for="option in options" :value="option.value" :key="option">
      {{ option.text }}
    </option>
  </select>
  <div> select2ed:{{ select2ed }}</div>
  <div>Selected: {{ selected }}</div>
  <select v-model="selected" multiple>
    <option disabld value="">please select one</option>
     <option>A</option>
     <option>B</option>
     <option>C</option>
  </select>
  <div>Picked: {{ picked }}</div>
  <input type="radio" id="one" value="one" v-model="picked"/>
  <label for="one">one</label>

  <input type="radio" id="two" value="two" v-model="picked"/>
  <label for="two">two</label> -->

 <!-- <p>拥有数据集个数：</p>
 <span>{{ listLength }}</span>
 <span>{{ fullName }}</span>
 <div :class="computedClass" :style="styleObject">xiaoketangss</div>
 <h1 v-if="title">xiaoket</h1>
 <h1 v-else>xdclass.net</h1>
 <h1 v-if="type ===1">xiaoke1</h1>
 <h1 v-else-if="type === 2">xiaoke2</h1>
<h1 v-else-if = "type === 3">xiaoke3</h1>
<h1 v-else>xiaoke4</h1>
<h1  v-show="isShow"> xiaokeshow</h1>
<ul>
  <li v-for="(item,index) in listConted" :key="item">{{ index }}:{{ item }} </li>
</ul>
<div v-for="item in items" :key="item">
  <span v-for="child in item.message" :key="child">{{ child }}</span>
</div>
<ul>
  <li v-for="item in courseList" :key="item">
  {{ item.name }}:
  <div v-for="childItem in item.list" :key="childItem">{{ childItem }}</div>
  </li>
</ul>
<li v-for="n in eventNumbers" :key="n">{{ n }}</li>
<button @click="count++">Add 1</button>
<p>Count is: {{ count }}</p>
<button @click="greet">Greet</button>
<button @click="say('helo')">sya heelo</button>
<button @click="say('byt')">say bta</button>
<button @click="warn('Form cannot be submitted yet.', $event)">Submit</button>
<button @click="(event) => warn('Form cannot be submitted yet.', event)">Submit1</button>
<a @click.once="doThis">单击事件</a>
<input @keyup.enter="submitkey" :value="inputmessage"/>
<div>
  <input v-model="text" placeholder="edit me">
</div>
<span>Multiline message is:</span>
<p :style="tstyle">{{ multiline }}</p>
<textarea v-model="multiline" placeholder="add multiline lines"></textarea>
<input type="checkbox" id="checkbox" v-model="checked"/>
<label for="checkbox">{{ checked }}</label> -->
<!-- <div>Checked names:{{ checkedNames }}</div>
<input type="checkbox" id="jack" value="jack" v-model="checkedNames"/>
<label for="jack">jack</label>

<input type="checkbox" id="john" value="john" v-model="checkedNames"/>
<label for="john">john</label>

<input type="checkbox" id="mike" value="mike" v-model="checkedNames"/>
<label for="mike">mike</label> -->
</template>

<style scoped>

</style>
